<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="css/top.css">
    <link rel="stylesheet" href="css/foot.css">
    <title>我的订单</title>
    <style>
        body{ width: 100%; margin: 0; padding: 0; font-family: '微软雅黑';}
		body p{ color:#949494; font-size:14px; padding-left:10px;}
		a:link,a:visited,a:hover,a:active{text-decoration: none;color: white;}
        input::-ms-input-placeholder{text-align: center;}
        .header{ text-align: center; background-color: #F9BC69; color: aliceblue; width: 100%; height: 40px; line-height: 40px;}
		.h-left{float:left;width:15%; height:40px;}
        .h-left a{ display:block; width:45px; height:40px; margin:auto; background: url(images/common/splb_icon_back.png) no-repeat 15px center; background-size: auto 16px; }
		.body{padding:3%;}
		.h-mid { width:70%; height:40px; float:left; text-align:center; color:#333; font-size:16px; line-height:45px; position:relative;}
		.h-mid span { color:#FFF; font-size:12px;}
		.select{padding-left:3%;padding-right:3%;    margin-top: 50px;}
		.button{list-style-type:none;background-color:#efefef;width:48%;height:35px;float:left;border:0px solid #efefef; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px;text-align:center;line-height:35px;color:black;font-size:14px;}
		.orderlist{
			padding-bottom:15%;}
		.bar{background:url(images/common/line_rwb.png);background-size:100% 100%;background-position:center;height:10px;margin-top:5px}
		.detail{position:relative;margin-top:25px;border:1px solid #949494; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px;font-size:12px;padding:1%}
		.circle{width:35px;height:35px;border-radius:50px;border:solid #F9BC69 1px;background-color:#F9BC69;text-align:center;line-height:35px;font-size:20px;font-weight:bold;color:white;position:absolute;top:-18px;right:5%}
		.mingxi{position:absolute;top:50%;right:2%;background-color:#F9BC69;border:1px solid #F9BC69; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px;text-align:center;width:60px;font-weight:bold;color:white;}
		td{width:120px;}
		.clearfix:after {content: " ";display: block;clear: both;height: 0;}
		.clearfix {zoom: 1;}
    </style>
    <script type="text/javascript">
    	function btn(val){
			var chuli = document.getElementById("chuli");
			var status = document.getElementsByName("status");
			var wancheng = document.getElementById("wancheng");
			var i=0;
			if(val == 1){
				chuli.style.background="#949494";
				for(i=0; i<status.length; i++){
					status[i].innerHTML="处理中";
				}
				wancheng.style.background="#efefef";
			} else {
				chuli.style.background="#efefef";
				for(var i=0; i<status.length; i++){
					status[i].innerHTML="已完成";
				}
				wancheng.style.background="#949494";
			}
		}
    </script>
</head>
<body>
    <div class="top">
        <div class="top_left"><a class="sb-back" href="javascript:history.back(-1)" title="返回"><img src="images/icon_back.png" alt=""></a></div>
        我的订单
    </div>
    <div class="body">
    	<div class="select clearfix" >
        	<a href="javascript:btn(1)"><div class="button" id="chuli" style="background-color:#949494">处理中</div></a>
            <a href="javascript:btn(2)"><div class="button" id="wancheng"style="margin-left:10px">已完成</div></a>
        </div>
        <div class="orderlist">
        	<div class="order">
            	
                <div class="detail">
                	<div class="circle">1</div>
                    <div class="mingxi"><a href="user_order_detail.html">订单明细</a></div>
                    <span>订单编号：</span><br>
					<span>000ZH002000ZH0021201607140033</span><br>
                    <span>下单时间：</span><span>2016-07-14 10:46:13</span><br>
                    <span>取货时间：</span><span>2016-07-14 10:46:13</span><br>
                    <span>状态：</span><span name="status">处理中</span><br>
                    <table>
                        <tr>
                            <td>毛毛虫</td>
                            <td>数量：1</td>
                        </tr>
                        <tr>
                            <td>精选黑森林（6寸）</td>
                            <td>数量：2</td>
                        </tr>
                        <tr>
                            <td>雪媚娘</td>
                            <td>数量：1</td>
                        </tr>
                        <tr>
                            <td>精选黑森林（6寸）</td>
                            <td>数量：2</td>
                        </tr>
                        <tr>
                            <td>共6件商品</td>
                            <td style="width:200px">合计：105（配送费：￥5.00）</td>
                        </tr>
                    </table>
                </div>
            </div>
            <div class="order">
            	
                <div class="detail">
                	<div class="circle">2</div>
                    <div class="mingxi"><a href="user_order_detail.html">订单明细</a></div>
                    <span>订单编号：</span><br>
					<span>000ZH002000ZH0021201607140033</span><br>
                    <span>下单时间：</span><span>2016-07-14 10:46:13</span><br>
                    <span>取货时间：</span><span>2016-07-14 10:46:13</span><br>
                    <span>状态：</span><span name="status">处理中</span><br>
                    <table>
                        <tr>
                            <td>毛毛虫</td>
                            <td>数量：1</td>
                        </tr>
                        <tr>
                            <td>精选黑森林（6寸）</td>
                            <td>数量：2</td>
                        </tr>
                        <tr>
                            <td>雪媚娘</td>
                            <td>数量：1</td>
                        </tr>
                        <tr>
                            <td>共4件商品</td>
                            <td style="width:200px">合计：105（配送费：￥5.00）</td>
                        </tr>
                    </table>
                </div>
            </div>
            <div class="order">
            	
                <div class="detail">
                	<div class="circle">3</div>
                    <div class="mingxi"><a href="user_order_detail.html">订单明细</a></div>
                    <span>订单编号：</span><br>
					<span>000ZH002000ZH0021201607140033</span><br>
                    <span>下单时间：</span><span>2016-07-14 10:46:13</span><br>
                    <span>取货时间：</span><span>2016-07-14 10:46:13</span><br>
                    <span>状态：</span><span name="status">处理中</span><br>
                    <table>
                        <tr>
                            <td>毛毛虫</td>
                            <td>数量：1</td>
                        </tr>
                        <tr>
                            <td>共1件商品</td>
                            <td style="width:200px">合计：105（配送费：￥5.00）</td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <div class="foot">
        <ul>
            <li>
                <div class="img"><a href="index.html"><img src="images/index_botmenu01off.png" alt=""></a></div>
            </li>
            <li>
                <div class="img"><a href="flow.html"><img src="images/index_botmenu02off.png" alt=""></a></div>
            </li>
            <li>
                <div class="img"><a href="user_order_list.html"><img src="images/index_botmenu03off.png" alt=""></a></div>
            </li>
        </ul>
    </div>
</body>
</html>